<!-- 高端常用词页面内容 -->
<style>
/* 高端常用词页面样式 */
.premium-words-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 当在主框架中显示时的适配样式 */
.main-content .premium-words-container {
    padding: 0;
    max-width: none;
    height: 100%;
    min-height: calc(100vh - 160px);
    overflow-y: auto;
    flex: 1;
}

.premium-categories {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.premium-category-btn {
    padding: 14px 24px;
    background: transparent;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.premium-category-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.6s;
}

.premium-category-btn:hover::before {
    left: 100%;
}

.premium-category-btn.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    color: white;
    box-shadow: 
        0 8px 16px rgba(59, 130, 246, 0.4),
        0 4px 8px rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.premium-category-btn:hover:not(.active) {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.4);
    color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.premium-words-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

.premium-word-tag {
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(226, 232, 240, 0.6);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.premium-word-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.5s;
}

.premium-word-tag:hover::before {
    left: 100%;
}

.premium-word-tag:hover {
    border-color: #3b82f6;
    color: #1e40af;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 12px 24px rgba(59, 130, 246, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.08);
}

.premium-word-tag.selected {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    color: white;
    box-shadow: 
        0 8px 20px rgba(59, 130, 246, 0.4),
        0 4px 8px rgba(59, 130, 246, 0.2);
    transform: translateY(-4px) scale(1.02);
}

.premium-add-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 40px;
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04);
}

.premium-add-section h3 {
    color: #1e293b;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premium-add-input {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.premium-add-input input {
    flex: 1;
    max-width: 350px;
    padding: 16px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.premium-add-input input:focus {
    outline: none;
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.premium-management {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 28px;
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04);
}

.premium-management h3 {
    color: #1e293b;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premium-management-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.premium-btn {
    padding: 12px 24px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 14px;
}

.premium-btn:hover {
    border-color: #3b82f6;
    color: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.delete-word {
    margin-left: 8px;
    color: #ef4444;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-weight: bold;
}

.premium-word-tag:hover .delete-word {
    opacity: 1;
}

.delete-word:hover {
    color: #dc2626;
    transform: scale(1.2);
}
</style>

<div class="common-words-container premium-words-container">
    <!-- 分类标签 -->
    <div class="word-categories premium-categories">
        <button class="category-btn premium-category-btn active" 
                onclick="switchCategory('sales_opening', this)">
            <span>🎯 销售开场</span>
        </button>
        <button class="category-btn premium-category-btn" 
                onclick="switchCategory('demand_discovery', this)">
            <span>🔍 挖掘需求</span>
        </button>
        <button class="category-btn premium-category-btn" 
                onclick="switchCategory('follow_up', this)">
            <span>📞 以后联系</span>
        </button>
        <button class="category-btn premium-category-btn" 
                onclick="switchCategory('objection_handling', this)">
            <span>💡 异议处理</span>
        </button>
        <button class="category-btn premium-category-btn" 
                onclick="switchCategory('closing', this)">
            <span>🤝 成交促成</span>
        </button>
        <button class="category-btn premium-category-btn" 
                onclick="switchCategory('custom', this)">
            <span>✨ 自定义</span>
        </button>
    </div>

    <!-- 常用词列表 -->
    <div id="words-container" class="words-grid premium-words-grid">
        <!-- 销售开场默认词汇 -->
        <div class="word-tag premium-word-tag" onclick="insertWord('销售开场')">销售开场</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('挖掘需求')">挖掘需求</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('以后联系')">以后联系</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('不回信')">不回信</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('议价')">议价</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('信任')">信任</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('需求')">需求</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('删除')">删除</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('异议')">异议</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('价值')">价值</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('签单')">签单</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('拒绝')">拒绝</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('通单')">通单</div>
        <div class="word-tag premium-word-tag" onclick="insertWord('销冠')">销冠</div>
    </div>

    <!-- 添加新词汇 -->
    <div class="add-word-section premium-add-section">
        <h3>添加新词汇</h3>
        <div class="premium-add-input">
            <input type="text" 
                   id="new-word-input" 
                   class="form-control" 
                   placeholder="输入新的常用词...">
            <button class="btn btn-primary" onclick="addNewWord()" style="padding: 16px 32px; border-radius: 12px; font-weight: 600;">
                添加
            </button>
        </div>
    </div>

    <!-- 词汇管理 -->
    <div class="word-management premium-management">
        <h3>词汇管理</h3>
        <div class="premium-management-buttons">
            <button class="btn btn-secondary premium-btn" onclick="exportWords()">
                💾 导出词汇
            </button>
            <button class="btn btn-secondary premium-btn" onclick="importWords()">
                📁 导入词汇
            </button>
            <button class="btn btn-secondary premium-btn" onclick="resetToDefault()">
                🔄 恢复默认
            </button>
        </div>
    </div>
</div>

<script>
// 常用词数据 (实际项目中应该从后端获取)
const commonWordsData = {
    'sales_opening': [
        '您好，我是XX公司的',
        '冒昧打扰您',
        '我们是专业做XX的',
        '看到您的信息',
        '想了解一下您的需求',
        '我们有个很好的方案',
        '可以为您节省成本',
        '提高效率'
    ],
    'demand_discovery': [
        '请问您现在在用什么',
        '效果怎么样',
        '有什么痛点吗',
        '预算大概多少',
        '什么时候需要',
        '谁来决策这个事情',
        '之前有了解过类似的吗',
        '您最关心什么'
    ],
    'follow_up': [
        '改天再联系您',
        '过几天我再电话您',
        '您什么时候方便',
        '我发个资料给您',
        '您可以先了解一下',
        '有问题随时联系我',
        '我们保持联系',
        '期待与您合作'
    ],
    'objection_handling': [
        '我理解您的顾虑',
        '很多客户开始也这么想',
        '我们可以先试试',
        '这个投资是值得的',
        '长远来看很划算',
        '我们有成功案例',
        '可以给您优惠',
        '风险我们承担'
    ],
    'closing': [
        '现在决定有优惠',
        '名额有限',
        '今天就可以开始',
        '我们马上安排',
        '您看什么时候签约',
        '需要我准备什么',
        '恭喜您做了明智选择',
        '期待长期合作'
    ],
    'custom': []
};

// 切换分类
function switchCategory(category, element) {
    // 更新按钮状态
    document.querySelectorAll('.premium-category-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    element.classList.add('active');
    
    // 更新词汇列表
    const wordsContainer = document.getElementById('words-container');
    const words = commonWordsData[category] || [];
    
    wordsContainer.innerHTML = words.map(word => `
        <div class="word-tag premium-word-tag" onclick="insertWord('${word}')">
            ${word}
            <span class="delete-word" onclick="deleteWord('${word}', '${category}')">×</span>
        </div>
    `).join('');
}

// 插入词汇到对话输入框 (如果在对话页面)
function insertWord(word) {
    // 检查是否在主框架环境中
    const isMainFrame = window.parent && window.parent !== window;
    
    if (isMainFrame) {
        // 在主框架中，通过postMessage与父窗口通信
        window.parent.postMessage({
            type: 'INSERT_WORD',
            word: word
        }, '*');
    } else {
        // 如果当前在对话页面，插入到输入框
        const conversationInput = document.querySelector('#conversation-input');
        if (conversationInput) {
            const cursorPos = conversationInput.selectionStart;
            const textBefore = conversationInput.value.substring(0, cursorPos);
            const textAfter = conversationInput.value.substring(cursorPos);
            conversationInput.value = textBefore + word + textAfter;
            conversationInput.selectionStart = conversationInput.selectionEnd = cursorPos + word.length;
            conversationInput.focus();
        } else {
            // 如果不在对话页面，复制到剪贴板
            navigator.clipboard.writeText(word).then(() => {
                showToast('已复制到剪贴板: ' + word);
            }).catch(() => {
                showToast('复制失败');
            });
        }
    }
}

// 添加新词汇
function addNewWord() {
    const input = document.getElementById('new-word-input');
    const word = input.value.trim();
    
    if (!word) {
        showToast('请输入词汇内容', 'error');
        return;
    }
    
    // 获取当前选中的分类
    const activeCategory = document.querySelector('.premium-category-btn.active');
    const category = activeCategory ? activeCategory.onclick.toString().match(/'([^']+)'/)[1] : 'custom';
    
    // 添加到对应分类
    if (!commonWordsData[category]) {
        commonWordsData[category] = [];
    }
    
    if (commonWordsData[category].includes(word)) {
        showToast('词汇已存在', 'error');
        return;
    }
    
    commonWordsData[category].push(word);
    input.value = '';
    
    // 刷新当前分类显示
    switchCategory(category, activeCategory);
    
    showToast('添加成功');
}

// 删除词汇
function deleteWord(word, category) {
    if (confirm('确定要删除这个词汇吗？')) {
        const index = commonWordsData[category].indexOf(word);
        if (index > -1) {
            commonWordsData[category].splice(index, 1);
            
            // 刷新显示
            const activeCategory = document.querySelector('.premium-category-btn.active');
            switchCategory(category, activeCategory);
            
            showToast('删除成功');
        }
    }
}

// 导出词汇
function exportWords() {
    const dataStr = JSON.stringify(commonWordsData, null, 2);
    const dataBlob = new Blob([dataStr], { type: 'application/json' });
    const url = URL.createObjectURL(dataBlob);
    
    const link = document.createElement('a');
    link.href = url;
    link.download = 'common_words_export.json';
    link.click();
    
    URL.revokeObjectURL(url);
    showToast('导出成功');
}

// 导入词汇
function importWords() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.json';
    
    input.onchange = function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const importedData = JSON.parse(e.target.result);
                    
                    // 合并数据
                    Object.keys(importedData).forEach(category => {
                        if (!commonWordsData[category]) {
                            commonWordsData[category] = [];
                        }
                        
                        importedData[category].forEach(word => {
                            if (!commonWordsData[category].includes(word)) {
                                commonWordsData[category].push(word);
                            }
                        });
                    });
                    
                    // 刷新显示
                    const activeCategory = document.querySelector('.premium-category-btn.active');
                    const categoryName = activeCategory.onclick.toString().match(/'([^']+)'/)[1];
                    switchCategory(categoryName, activeCategory);
                    
                    showToast('导入成功');
                } catch (error) {
                    showToast('导入失败，文件格式错误', 'error');
                }
            };
            reader.readAsText(file);
        }
    };
    
    input.click();
}

// 恢复默认
function resetToDefault() {
    if (confirm('确定要恢复到默认词汇吗？这将清除所有自定义词汇。')) {
        // 重置数据到默认值
        commonWordsData.sales_opening = [
            '您好，我是XX公司的',
            '冒昧打扰您',
            '我们是专业做XX的',
            '看到您的信息',
            '想了解一下您的需求',
            '我们有个很好的方案',
            '可以为您节省成本',
            '提高效率'
        ];
        
        // 刷新显示
        const activeCategory = document.querySelector('.premium-category-btn.active');
        const categoryName = activeCategory.onclick.toString().match(/'([^']+)'/)[1];
        switchCategory(categoryName, activeCategory);
        
        showToast('已恢复默认设置');
    }
}

// 初始化
document.addEventListener('DOMContentLoaded', function() {
    // 默认显示销售开场分类
    const defaultBtn = document.querySelector('.premium-category-btn.active');
    if (defaultBtn) {
        switchCategory('sales_opening', defaultBtn);
    }
});
</script>